<template>
  <div>
    <div class="bg"></div>
    <div class="rg_layout">
      <div class="rg_form clearfix">
        <div class="rg_form_left">
          <p>新用户注册</p>
          <p>USER REGISTER</p>
        </div>
        <div class="rg_form_center">
          <div id="linkMsg" style="color: cornflowerblue;text-align: center">
            <h3>{{linktoMsg}}</h3>
          </div>

          <table style="margin-top: 25px;">
            <tr>
              <td class="td_left">
                <label for="username">用户名</label>
              </td>
              <td class="td_right">
                <input type="text" id="username" v-model="user.nickName" placeholder="请输入昵称" @change="checkName">
              <td class="checkMessage"><span>{{checkUsername}}</span></td>
              </td>

            </tr>
            <tr>
              <td class="td_left">
                <label for="password">密码</label>
              </td>
              <td class="td_right">
                <input @change="checkPassword" type="text" id="password" placeholder="请输入密码" v-model="user.password">
              </td>
              <td class="checkMessage"><span>{{checkPwd}}</span></td>

            </tr>
            <tr>
              <td class="td_left">
                <label for="email">Email</label>
              </td>
              <td class="td_right">
                <input @change="checkEmails" type="text" id="email" v-model="user.email" placeholder="请输入Email">
              </td>
              <td class="checkMessage"><span>{{checkEmail}}</span></td>
            </tr>
<!--            <tr>
              <td class="td_left">
                <label for="name">姓名</label>
              </td>
              <td class="td_right">
                <input type="text" id="name" name="name" @change="checkRealName" v-model="user.realName"
                  placeholder="请输入真实姓名">
              </td>
              <td class="checkMessage"><span>{{RealNameMsg}}</span></td>
            </tr> -->
            <tr>
              <td class="td_left">
                <label for="telephone">手机号</label>
              </td>
              <td class="td_right">
                <input type="text" id="telephone" @change="checkPhoneNum" v-model="user.phone"
                  placeholder="请输入您的手机号">
              </td>
              <td class="checkMessage"><span>{{phoneMsg}}</span></td>
            </tr>
            <!-- <tr>
              <td class="td_left">
                <label for="sex">性别</label>
              </td>
              <td class="td_right gender">
                <template>
                  <el-radio v-model="user.gender" label="男">男</el-radio>
                  <el-radio v-model="user.gender" label="女">女</el-radio>
                </template>
              </td>
            </tr>
            <tr>
              <td class="td_left">
                <label for="birthday">出生日期</label>
              </td>
              <td class="td_right">
                <input type="date" id="birthday" name="birthday" v-model="user.birthday" placeholder="年/月/日">
              </td>
              <td class="checkMessage"><span>{{birthMsg}}</span></td>
            </tr> -->
            <tr>
              <td class="td_left">
              </td>
              <td class="td_right check">
                <input type="submit" class="btn" @click="register" value="注册">
              </td>
            </tr>
          </table>
        </div>
        <div class="rg_form_right">

          <p>
              <el-link href="#/login" target="_self">已有账号？立即登录</el-link>
          </p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'Register',
    data() {
      return {
        user: {
          nickName: "",
          password: "",
          email: "",
          phone: "",
          flag: "",
        },
        checkPwd: "",
        checkEmail: "",
        checkUsername: "",
        phoneMsg: "",
        linktoMsg: "",
        isclick: true,

      }
    },
    methods: {
      checkName() {
        if (this.user.nickname == "") {
          this.$("#username").css("border", "1px solid red");
          this.checkUsername = "用户名不能为空"
          return 0;
        } else {
          this.$("#username").css("border", "");
          this.checkUsername = ""
          return true;
        }
      },
      // checkRealName() {
      //   if (this.user.realName == "") {
      //     this.$("#name").css("border", "1px solid red");
      //     this.RealNameMsg = "姓名不能为空"
      //     return 0;
      //   } else {
      //     this.$("#name").css("border", "");
      //     this.RealNameMsg = ""
      //     return true;
      //   }
      // },
      checkPhoneNum() {
        if (this.user.phoneNum == "") {
          this.$("#telephone").css("border", "1px solid red");
          this.phoneMsg = "号码不能为空"
          return 0;
        } else {
          var reg_phoneNum = /^\w{11}$/;

          var f = reg_phoneNum.test(this.user.phone);
          if (f) {
            this.$http.post("/account/check" ,{phone:this.user.phone}).then(resp => {
              if (resp.data.code == 200) {
                this.flag = true
                this.phoneMsg = ""
                this.$("#telephone").css("border", "");
                return true;
              } else {
                this.flag = false;
                this.$("#telephone").css("border", "1px solid red");
                this.phoneMsg = resp.data.message

              }
            })
          } else {
            this.phoneMsg = "请输入11位数字的电话号码";
          }
          return this.flag;

        }
      },
      // checkBirthday() {
      //   if (this.user.birthday == "") {
      //     this.birthMsg = "生日不能为空"
      //     return 0;
      //   } else {
      //     this.birthMsg = ""
      //     return true;
      //   }
      // },

      //校验密码
      checkPassword() {
        //定义正则
        var reg_password = /^\w{3,20}$/;

        var flag = reg_password.test(this.user.password);
        if (flag) {
          //密码合法
          this.$("#password").css("border", "");
          this.checkPwd = ""
        } else {
          this.$("#password").css("border", "1px solid red");
          this.checkPwd = "请输入3-20位密码"
        }
        return flag;

      },

      //校验邮箱
      checkEmails() {
        var reg_email = /^\w+@\w+\.\w+$/;
        //判断
        var flag = reg_email.test(this.user.email);
        if (flag) {
          this.$http.post("/account/check" ,{email:this.user.email}).then(resp => {
            if (resp.data.code == 200) {
              this.flag = true
              this.checkEmail = ""
              this.$("#email").css("border", "");
              return true;
            } else {
              this.$message.error(resp.data.message)
              this.flag = false;
              this.$("#email").css("border", "1px solid red");
              this.checkEmail = resp.data.message
          
            }
          })
        } else {
          
          this.$("#email").css("border", "1px solid red");
          this.checkEmail = "请输入正确的邮箱格式"
        }

        return flag;
      },



      register() {

        if (true) {
          if (this.checkName() && this.checkPassword() && this.checkEmails() &&
            this.checkPhoneNum() ) {
            this.isclick = false;
            this.$http.post("/account/register", this.user).then(resp => {

              if (resp.data.code == 200) {
                alert(resp.data.message);
                this.user = {
                  nickName: "",
                  password: "",
                  email: "",
                  phone: "",
                }
                this.isclick = true;
              }else{
            this.$message.error(resp.data.message)
          }

            })

          }
        }
      },

    }
  }
</script>


<style scoped>
  .bg{
    width: 100%;
    height: 100%;
    background-image: url("../assets/r__background.png");
    opacity: 0.7;
    display: flex;
    position: absolute;
    z-index: 1;
  }
  .rg_layout {
    position: relative;
    z-index: 3;
     display: flex;
    background-size: 100% 700px;

  }

  .rg_layout .rg_form {
    width: 780px;
    height: 380px;
    background-color: #fff;
    margin: 80px auto;
    border: 8px solid #eeeeee;
    box-sizing: border-box;
  }

  .rg_layout .rg_form>.rg_form_left {
    width: 200px;
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .rg_layout .rg_form>.rg_form_center {
    width: 500px;
    float: left;
    padding-top: 10px;
    box-sizing: border-box;
    font-size: 14px;
  }

  .rg_layout .rg_form>.rg_form_right {
    margin-left: 600px;
    width: 150px;
    position: absolute;
  }

  .checkMessage {
    float: right;
    color: red;
    font-size: 14px;
    margin-top: 15px;
    width: 100%;
  }

  .rg_form>.rg_form_left>p:first-child {
    font-size: 20px;
    color: #2D5AAF;
  }

  .rg_form>.rg_form_left>p:last-child {
    font-size: 20px;
    color: #a6a6a6;
  }

  .rg_form>.rg_form_center .td_left {
    width: 60px;
    text-align: right;
  }

  .rg_form>.rg_form_center table {
    vertical-align: top;
  }

  .rg_form>.rg_form_center table tr {
    height: 50px;
  }

  .rg_form>.rg_form_center .td_right {
    width: 280px;
  }

  .rg_form_center .td_right>input[type="text"],
  .rg_form_center .td_right>input[type="date"] {
    width: 256px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #a6a6a6;
    float: right;
  }

  .rg_form>.rg_form_center .td_right.gender {
    padding-left: 40px;
    box-sizing: border-box;
  }

  .rg_form>.rg_form_center .td_right>.submit {
    width: 120px;
    height: 36px;
    line-height: 36px;
    background-color: #2D5AAF;
    font-size: 14px;
  }

  .rg_form>.rg_form_right>p {
    float: right;
    font-size: 14px;
    margin-top: 20px;
    box-sizing: border-box;
  }

  .rg_form>.rg_form_right>p>a {
    color: #a6a6a6;
  }

  .btn {
    display: block;
    border-radius: 8px;
    background-color: #2D5AAF;
    font-size: 15px;
    color: white;
    width: 160px;
    height: 35px;
    margin: 20px 35px;
    border: none;
  }
</style>
